<template>
	<view class="container">
	  <!-- 概念信息卡片 -->
	  <view class="concept-card">
		<text class="title">{{ conceptInfo.name }}</text>
		<text class="desc">{{ conceptInfo.description }}</text>
		<view class="stats">
		  <view class="stat-item">
			<text class="label">相关公司：</text>
			<text class="value">{{ conceptInfo.totalCompanies }}家</text>
		  </view>
		  <view class="stat-item">
			<text class="label">专利总量：</text>
			<text class="value">{{ conceptInfo.totalPatents }}件</text>
		  </view>
		</view>
	  </view>
  
	  <!-- 专利分布图表 -->
	  <view class="chart-card">
		<view class="card-header">
		  <text class="iconfont icon-patent"></text>
		  <text class="title">专利分布TOP5</text>
		</view>
		<view class="chart-container">
		  <qiun-data-charts 
			type="column"
			:opts="barOpts"
			:chartData="patentData"
			canvasId="patentBar"
		  />
		</view>
	  </view>
  
	  <!-- 相关公司列表 -->
	  <view class="stocks-card">
		<view class="card-header">
		  <text class="iconfont icon-trend"></text>
		  <text class="title">相关公司</text>
		</view>
		<view class="stock-list">
		  <view 
			class="stock-item"
			v-for="stock in stocks"
			:key="stock.code"
			@tap="handleStockClick(stock.code)"
		  >
			<view class="stock-info">
			  <view class="stock-name">
				<text class="name">{{ stock.name }}</text>
				<text class="code">{{ stock.code }}</text>
			  </view>
			  <view class="stock-patent">
				<text class="label">专利数量</text>
				<text class="value">{{ stock.patents.total }}</text>
			  </view>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		// 基础配置保持不变...
		
		conceptInfo: {}, // 概念基础信息
		patentData: {},  // 专利分布数据
		stocks: []      // 相关股票列表
	  }
	},
	
	onLoad(options) {
	  console.log('================ 页面加载 ================')
	  const { id } = options
	  console.log('概念ID:', id)
	  
	  if(id) {
		this.getConceptDetail(id)
	  } else {
		console.error('缺少概念ID参数')
		uni.showToast({
		  title: '参数错误',
		  icon: 'none'
		})
	  }
	},
	
	methods: {
	  async getConceptDetail(id) {
		console.log('================ 获取概念详情 ================')
		try {
		  console.log('准备调用云函数...')
		  const res = await uniCloud.callFunction({
			name: 'concept',
			data: {
			  action: 'getConceptDetail',
			  params: { id }
			}
		  })
		  
		  console.log('云函数返回结果:', res)
		  
		  if(res.result.code === 200) {
			const detail = res.result.data
			console.log('获取成功,详情数据:', detail)
			
			// 更新页面数据
			this.conceptInfo = {
			  name: detail.name,
			  description: detail.description,
			  totalCompanies: detail.totalCompanies,
			  totalPatents: detail.totalPatents
			}
			
			this.patentData = detail.patentData
			this.stocks = detail.stocks
			
			console.log('数据更新完成')
		  } else {
			console.error('获取失败:', res.result.msg)
			uni.showToast({
			  title: res.result.msg,
			  icon: 'none'
			})
		  }
		  
		} catch(e) {
		  console.error('获取详情异常:', e)
		  uni.showToast({
			title: '获取详情失败',
			icon: 'none'
		  })
		} finally {
		  console.log('==========================================')
		}
	  },
	  
	  handleBack() {
		console.log('返回上一页')
		uni.navigateBack()
	  },
	  
	  async handleStockClick(code) {
		try {
		  // 检查股票代码
		  if (!code) {
			uni.showToast({
			  title: '股票代码格式错误',
			  icon: 'none'
			})
			return
		  }

		  uni.showLoading({
			title: '加载中...',
			mask: true
		  })

		  console.log('请求专利信息，股票代码:', code)

		  const res = await uniCloud.callFunction({
			name: 'patent',
			data: {
			  action: 'getCompanyPatentInfo',
			  params: {
				stockCode: code
			  }
			}
		  })

		  console.log('专利信息返回结果:', res)

		  if (res.result.code === 200) {
			uni.navigateTo({
			  url: `/pages/stock/detail?info=${encodeURIComponent(JSON.stringify(res.result.data))}`
			})
		  } else {
			uni.showToast({
			  title: res.result.msg || '获取数据失败',
			  icon: 'none'
			})
		  }

		} catch (e) {
		  console.error('获取详情异常:', e)
		  uni.showToast({
			title: '获取详情失败',
			icon: 'none'
		  })
		} finally {
		  uni.hideLoading()
		}
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	padding: 30rpx;
	background: #f5f5f5;
  }
  
  .nav-back {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 30rpx;
	
	.iconfont {
	  margin-right: 10rpx;
	}
  }
  
  .concept-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.title {
	  font-size: 40rpx;
	  font-weight: bold;
	  margin-bottom: 20rpx;
	}
	
	.desc {
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 30rpx;
	}
	
	.stats {
	  display: flex;
	  gap: 40rpx;
	  
	  .stat-item {
		.label {
		  font-size: 24rpx;
		  color: #999;
		}
		.value {
		  font-size: 28rpx;
		  font-weight: bold;
		  margin-left: 10rpx;
		  
		  &.trend {
			color: #ff4d4f;
		  }
		}
	  }
	}
  }
  
  .chart-card, .stocks-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	
	.card-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 30rpx;
	  
	  .iconfont {
		margin-right: 10rpx;
		font-size: 36rpx;
	  }
	  
	  .title {
		font-size: 32rpx;
		font-weight: bold;
	  }
	}
  }
  
  .chart-container {
	height: 600rpx;
  }
  
  .stocks-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	
	.card-header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 30rpx;
	  
	  .iconfont {
		margin-right: 10rpx;
		font-size: 36rpx;
	  }
	  
	  .title {
		font-size: 32rpx;
		font-weight: bold;
	  }
	}
	
	.stock-list {
	  .stock-item {
		background: #f8f9fc;
		border-radius: 8rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		
		&:active {
		  background: #f0f1f5;
		}
		
		.stock-info {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  
		  .stock-name {
			.name {
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #333;
			  margin-right: 12rpx;
			}
			
			.code {
			  font-size: 24rpx;
			  color: #999;
			}
		  }
		  
		  .stock-patent {
			text-align: right;
			
			.label {
			  font-size: 24rpx;
			  color: #666;
			  margin-right: 8rpx;
			}
			
			.value {
			  font-size: 28rpx;
			  font-weight: 500;
			  color: #2b85e4;
			}
		  }
		}
	  }
	}
  }
  </style>